import { useRouter } from '@tarojs/taro';
import { useContext } from 'react';

import { Context } from '../../context';
import Text from '../Text';
import Wrapper from '../Wrapper';

import type { FC } from 'react';

import { EventUtil, RouterUtil } from '@/utils';
import { useAddress } from '@/hooks';

export interface CustomRegionProps {}

const CustomRegion: FC<CustomRegionProps> = () => {
  const { path } = useRouter();
  const { title, name, value, onChange } = useContext(Context);

  const field = `${path}_${name}`;

  EventUtil.useEvents(field, (v) => {
    onChange?.(name, v);
  });

  // 使用 useAddress hook 将省市区代码转换为文本
  const { address } = useAddress({
    province: value?.[0],
    city: value?.[1],
    area: value?.[2],
  });

  return (
    <Wrapper
      onClick={() => {
        RouterUtil.navigateTo('/packageCommon/pages/edit/index', {
          title,
          field,
          defaultValue: value ? JSON.stringify(value) : '',
          renderType: 'region',
        });
      }}
    >
      <Text>{address}</Text>
    </Wrapper>
  );
};

export default CustomRegion;
